<template>
    <p>currentNum： {{Test.currentNum}}</p> 
    <p>Test.sname: {{Test.sname}}</p>
    <p>Test.getSnameGetter: {{Test.getSnameGetter}}</p>
    <p>userInfo: {{Test.useInfo}}</p>

    <a-button @click="Test.setCurrentNum">add</a-button>
    <a-button @click="reset">reset</a-button>
    <a-button @click="Test.login">login</a-button>
    <a-button @click="moremodify">moremodify</a-button>
</template>

<script setup lang="ts">
import {useStore} from "../../store/index"
import {storeToRefs} from 'pinia'

const Test = useStore()

// 直接解构失去响应式
// const {currentNum, sname} = Test
// 有响应式
const {currentNum, sname} = storeToRefs(Test)
console.log('currentNum = ', currentNum, 'sname = ',sname)

// 批量修改 state
const moremodify = () => {
  // 支持部分修改
  Test.$patch(state =>{
    state.currentNum = 1000000;
    state.sname =  '小明啊啊啊啊'
  })
  // 缺点： 必须修改全部的
  // Test.$state = {
  //   currentNum: 0,
  //   sname: '小明啊啊啊啊',
  //   useInfo: null as any
  // }
}


// 监控 state 变化
Test.$subscribe((args, state) =>{
  console.log('args =', args, 'state = ',state)
})

// 监控 action 调用
Test.$onAction((args)=> {
  console.log('onAction ===  args = ', args);
})

// 重置 reset
const reset = () => {
  Test.$reset()
}

const add = () => {
  // useStore
  console.log(Test)
  Test.currentNum++
  Test.currentNum++
}

</script>
